<template>
  <div class="khtablemain">
    <el-page-header content="编辑" @back="$router.back()" />
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      style="margin-top: 20px;"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="目录" prop="path">
        <el-input v-model="ruleForm.path" />
      </el-form-item>
      <el-form-item label="路径" prop="component">
        <el-input v-model="ruleForm.component" />
      </el-form-item>
      <el-form-item label="小图标" prop="icon">
        <el-input v-model="ruleForm.icon" />
      </el-form-item>
      <el-form-item label="排序" prop="orders">
        <el-input v-model="ruleForm.orders" type="number" />
      </el-form-item>
      <el-form-item label="是否隐藏" prop="hiddens">
        <el-select v-model="ruleForm.hiddens" placeholder="是否隐藏">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="允许传值" prop="props">
        <el-select v-model="ruleForm.props" placeholder="是否隐藏">
          <el-option v-for="item in propslist" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="客户地区" prop="khdq"> -->
      <!-- <el-select v-model="ruleForm.khdq" placeholder="请选择客户地区">
					<el-option label="沈阳" value="沈阳"></el-option>
					<el-option label="大连" value="大连"></el-option>
				</el-select> -->

      <!-- <el-select v-model="ruleForm.khdq" filterable placeholder="请选择">
					<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.name">
					</el-option>
				</el-select>
			</el-form-item> -->

      <!-- <el-form-item label="客户电话" prop="khtel">
				<el-input v-model="ruleForm.khtel"></el-input>
			</el-form-item> -->

      <!-- <el-form-item label="图片信息">
				<el-upload class="upload-demo" drag name="file" :action="fileUpload" :headers="headerstoken"
					:show-file-list="false" :on-success="imagesuccess" multiple>

					<template #trigger>
						<div v-if="ruleForm.images">
							<el-image :src="ruleForm.images">

							</el-image>
						</div>
						<div v-else>
							<i class="el-icon-upload"></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

						</div>
					</template>

<template #tip>
						<div>
							<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
						</div>
					</template>
</el-upload>
</el-form-item> -->
      <!-- 	<el-form-item label="活动性质" prop="type">
				<el-checkbox-group v-model="ruleForm.type">
					<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
					<el-checkbox label="地推活动" name="type"></el-checkbox>
					<el-checkbox label="线下主题活动" name="type"></el-checkbox>
					<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="特殊资源" prop="resource">
				<el-radio-group v-model="ruleForm.resource">
					<el-radio label="线上品牌商赞助"></el-radio>
					<el-radio label="线下场地免费"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="活动形式" prop="desc">
				<el-input type="textarea" v-model="ruleForm.desc"></el-input>
			</el-form-item> -->
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getToken
} from '@/utils/auth'
import store from '@/store'
export default {
  name: 'GoodFrom',
  props: ['id'], // 接收ID
  data() {
    return {
      ruleForm: {
        khname: '',
        khdq: '',
        khtel: '',
        khid: '',
        images: '',
        name: '', // 名称
        path: '', // 名称1以及是存目录，2级是存目录+文件名称
        component: '', // 名称 整个路径menu/menu-list
        parent_id: this.id, // 父ID，默认就是0
        hiddens: 1, // 是否隐藏,0是真，1是假
        props: 1, // 0是接收1不做处理
        icon: '', // 小图标管理,
        menu_id: 0, // 这个是主键ID
        orders: 0// 排序
      },
      rules: {
        khname: [{
          required: true,
          message: '请输入活动名称',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 15,
          message: '长度在 3 到 15 个字符',
          trigger: 'blur'
        }
        ],
        region: [{
          required: true,
          message: '请选择活动区域',
          trigger: 'change'
        }],
        khdq: [{
          required: true,
          message: '请您输入客户地区',
          trigger: 'change'
        }],
        khtel: [{
          required: true,
          message: '请您输入电话号码',
          trigger: 'blur'
        }]
      },

      options: [{
        value: 1,
        label: '否'
      }, {
        value: 0,
        label: '是'
      }],
      propslist: [{
        value: 1,
        label: '否'
      }, {
        value: 0,
        label: '是'
      }],
      loading: false,
      titles: '',
      value: '', // 下拉框的值
      token: '', //
      fileUpload: '', // imageURl地址
      headerstoken: {
        'x-token': getToken()
      }
    }
  }, mounted() {
    // this.parent_id = this.id
    // console.log('---edit---',this.id);
    // console.log('---',this.id);
    // 如果ID不是为空，那么就得调用详情了
    if (this.id) {
      // console.log('传值过来的数据', this.id)
      this.$store.dispatch('menu/getid', { menu_id: this.id })
        .then(res => {
          if (res.code == 0) {
            // this.tableData = res.data;

            // console.log('单个获取', res.data)
            // this.ruleForm.khdq = res.data.khdq;
            // this.ruleForm.khname = res.data.khname;
            // this.ruleForm.khtel = res.data.khtel;
            // this.ruleForm.khid = res.data.khid;

            // 		khname: '',
            // khdq: '',
            // khtel: '',
            this.ruleForm.name = res.data.name// 名称
            this.ruleForm.path = res.data.path// 名称1以及是存目录，2级是存目录+文件名称
            this.ruleForm.component = res.data.component// 名称 整个路径menu/menu-list
            this.ruleForm.hiddens = res.data.hiddens// 是否隐藏,0是真，1是假
            this.ruleForm.icon = res.data.icon// 小图标管理
            this.ruleForm.props = res.data.props// 0允许传值1不允许
            this.ruleForm.orders = res.data.orders// 排序
            // this.$message.error(res.msg);
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    } else {
      this.titles = '新增'
    }
  },
  // 加载界面的时候执行
  created() {

  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.id) {
            // console.log('123132123')
            this.ruleForm.menu_id = this.id
          }
          this.$store.dispatch('menu/edits', this.ruleForm)
            .then(res => {
              if (res.code == 0) {
                this.loading = false
                this.$message({
                  message: res.msg,
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.$router.back()
                  }
                })
              } else {
                this.loading = false
                this.$message.error(res.msg)
                return
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          this.$message.error('error submit!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 图片回调
    imagesuccess(res) {
      // console.log('成功的回调', res);
      this.ruleForm.images = store.getters.apiurl + res.data
      console.log(this.ruleForm.images)
    }
  }
}
</script>

<style lang="scss">
.khtablemain {
    margin: 20px;

    .el_image {
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}
</style>
